<template>
	<view class="indexPage">
		<!-- 顶部选项卡 -->
		<scroll-view class="scrollRow" scroll-x scroll-with-animation="true" @scroll="scroll" :scroll-into-view="scrollInto">
			<view v-for="(item,index) in tabBars" :key="index" :id="'tab'+index" class="scrollRowItem" :class="tabBarsIndex === index ? 'tabBarsIndexActive': ''"
			 @click="changeTab(index)">{{item}}</view>
		</scroll-view>

		<view class="index">
			<!-- 滑动块 -->
			<swiper class="swiper" :duration="150" circular :current="tabBarsIndex" @change="onChangeTab">
				<swiper-item v-for="(item,index) in tabBars" :key="index" class="swiperItem">
					<scroll-view scroll-y class="swiperView" @scrolltolower="loadmore(index)">
						<template v-if="list.length > 0">
							<block v-for="(items,indexs) in list" :key="indexs">
								<common-list :item="items" :index="indexs" @follow="follow" @doSupport="doSupport" />
								<divider />
							</block>
							<!-- 上拉加载 -->
							<view class="loadmore">
								<text>加载中...</text>
							</view>
						</template>

						<!-- 当没有数据时提示信息 -->
						<template v-else>
							<nothing />
						</template>

					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>
<script>
	import commonList from "@/components/common/common-list.vue";
	export default {
		components: {
			commonList
		},
		onLoad() {
			// 获取系统信息
			this.getSystemInfos();
			this.getTabBars();
			this.getDate();
			// this.getUserInfo();
		},
		onShow() {},
		// 监听点击导航栏的搜索框
		onNavigationBarSearchInputClicked() {
			uni.navigateTo({
				url: `../../search/search?type=index`,
			})
		},
		onNavigationBarButtonTap(e) {
			if (e.index === 0) {
				uni.navigateTo({
					url: "../../addinput/addinput"
				})
			};
		},
		data() {
			return {
				scrollInto: null,
				tabBarsIndex: 0,
				tabBars: [],
				list: [],
			}
		},
		methods: {
			// 关注
			follow(e) {
				this.list[e].follow = true;
				uni.showToast({
					title: "关注成功了",
					icon: "none"
				})
			},
			doSupport(e) {
				// 拿到当前对象
				let item = this.list[e.index];
				let msg = e.type === "support" ? "顶" : "踩";
				// 之前没有操作过的
				if (item.support.type === "") {
					item.support[e.type + '_count']++;
				} else if (item.support.type === "support" && e.type === "unsupport") {
					// 之前顶了
					// 顶 -1
					item.support.support_count--;
					// 踩 +1
					item.support.unsupport_count++;
				} else if (item.support.type === "unsupport" && e.type === "support") {
					// 之前踩了
					// 顶 +1
					item.support.support_count++;
					// 踩 -1
					item.support.unsupport_count--;
				};

				item.support.type = e.type;
				uni.showToast({
					title: `${msg}成功`,
					icon: "none",
					duration: 0.3 * 1000
				})
			},
			scroll(e) {
				// console.log(e)
				// this.old.scrollTop = e.detail.scrollTop
			},
			// 切换选项
			changeTab(index) {
				if (this.tabBarsIndex === index) return;
				this.tabBarsIndex = index;
				this.scrollInto = `tab${index}`;
			},
			// 监听滑动
			onChangeTab(e) {
				this.changeTab(e.detail.current);
			},
			// 获取系统信息
			getSystemInfos() {
				uni.getSystemInfo({
					success: res => {
						// 将信息保存到vuex中
						this.$store.commit("getSystemInfo", res)
					}
				});
			},
			async getDate() {
				let {
					result,
					success
				} = await uniCloud.callFunction({
					name: "index",
					data: {
						method: "add"
					}
				});
				this.list = result.data;
				this.list.loadmore = "更多内容的了吧";
			},
			async getUserInfo() {
				let res = await uniCloud.callFunction({
					name: "getUserInfo"
				});
			},
			async getTabBars() {
				this.tabBars = ["关注", "推荐", "体育", "热点", "军事", "娱乐", "消息"];
			},
			// 上拉加载
			async loadmore(index) {
				this.list[index].loadmore = "加载中...";
			}
		}
	}
</script>
<style lang="scss">
	.scrollRow {
		width: 100%;
		height: 70rpx;
		white-space: nowrap;
		border-bottom: 1rpx solid #E5E5E5;
	}

	.scrollRowItem {
		display: inline-block !important;
		width: 18vw;
		height: 100%;
		text-align: center;
		line-height: 70rpx;
		border-radius: 5rpx;
		font-size: 29rpx;
		letter-spacing: 10rpx;

		&:not(:last-of-type) {
			margin-right: 15rpx;
		}
	}

	// 选中状态的tab
	.tabBarsIndexActive {
		@include fontMainColor;
		font-size: 32rpx;
		font-weight: bolder;
	}

	.index {
		height: calc(100% - 70rpx);
	}

	.swiperView {
		padding-top: 20rpx;
	}

	.loadmore {
		@include flexCenterCenter;
	}
</style>
